import React from 'react';
import './style';

class DemoCard extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            collapse: true
        }
    }

    toggle = () => {
        this.setState({
            collapse: !this.state.collapse
        })
    }

    render() {
        return <div className="demo-card" >

            <div className="demo-card-header">
                <div className="demo-card-header-left">
                    {this.props.title}
                </div>
                <div className="demo-card-header-right">
                    <div onClick={this.toggle} className="toggle_collapse_icon"></div>
                </div>
            </div>

            {
                this.state.collapse && this.props.children && <div className="demo-card-body" >
                    {
                        this.props.children
                    }
                </div>
            }


        </div>
    }
}


class DemoCardGroup extends React.Component {
    render() {
        return <div className="demo-card-group" >

            {
                this.props.children
            }

        </div>
    }
}

export {
    DemoCard,
    DemoCardGroup
};

export default DemoCard;